<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-menu"></i>{{$route.name}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-form :model="news" ref="news" :rules="rules" label-width="100px" class="demo-ruleForm">
                <el-form-item label="文章标题" prop="title">
                    <el-input v-model="news.title"></el-input>
                </el-form-item>
                <el-form-item label="作者" prop="author">
                    <el-input v-model="news.author"></el-input>
                </el-form-item>
                <!-- <el-form-item label="文章分类" prop="textTypeId">
                    <el-select v-model="news.textTypeId" placeholder="文章分类">
                        <el-option v-for="type in types" :key="type.id" :label="type.name" :value="type.id"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="文章分类" prop="textTypeId">
                    <el-cascader :options="options" v-model="selects">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="图片说明" prop="imgState">
                    <el-input v-model="news.imgState"></el-input>
                </el-form-item>
                <el-form-item label="文章图片">
                    <el-upload class="avatar-uploader" :action="getLocation" ref="uploadPic" :data="uploadImg" :show-file-list="false" :before-upload="before_img" :on-success="handleAvatarSuccess">
                        <img v-if="news.imgUrl" :src="news.imgUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="所属机构" prop="organizationId">
                    <el-select v-model="news.organizationId" placeholder="所属机构">
                        <el-option v-for="org in orgs" :key="org.id" :label="org.name" :value="org.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否隐藏">
                    <el-switch v-model="show" active-color="#13ce66">
                    </el-switch>
                </el-form-item>
                <el-form-item label="是否推荐">
                    <el-switch v-model="recommend" active-color="#13ce66">
                    </el-switch>
                </el-form-item>
                <el-form-item label="文章内容" prop="content">
                    <quill-editor v-model="news.content" ref="myEdit"></quill-editor>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('news')">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-upload class="upload-demo" :action="getLocation" :before-upload='beforeUpload' :data="uploadData" :on-success='upScuccess' ref="upload" style="display:none">
            <el-button size="small" type="primary" id="imgInput" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="插入中,请稍候">点击上传</el-button>
        </el-upload>
    </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
export default {
    data() {
        return {
            uploadData: {},
            fullscreenLoading: false,
            uploadType: false,
            getLocation: '',
            news: {

            },
            types: [],
            show: false,
            imageUrl: '',
            uploadImg: {},
            rules: {
                title: [{
                    required: true, message: '请输入标题', trigger: 'blur'
                }],
                // articleType: [{
                //     required: true, message: '请选择文章分类', trigger: 'blur'
                // }],
                // organizationId: [
                //     { required: true, message: '请选择所属机构', trigger: 'blur' }
                // ]
            },
            recommend: false,
            options: [],
            selects: []
        }
    },
    created() {
        let self = this
        firstType()
            .then(res => {
                console.log('一级目录', res.result)
                if (res.status === 0) {
                    let arr = res.result
                    arr.map(it => {
                        let obj = {}
                        obj.value = it.id
                        obj.label = it.name
                        obj.children = []
                        let parentId = it.id
                        firstType({ parentId })
                            .then(r => {
                                if (r.status === 0) {
                                    let arr1 = r.result
                                    arr1.map(item => {
                                        let o = {}
                                        o.value = item.id
                                        o.label = item.name
                                        obj.children.push(o)
                                    })
                                }
                            })
                        self.options.push(obj)
                    })
                }
            })
        console.log('option:', this.options)
        // secondType()
        // .then(res => {
        // this.types = res.result
        // })
        if (this.article.id) {
            this.news = this.article
            this.news.show = this.article.shield
        }
        this.getLocation = location
    },
    computed: {
        editor() {
            return this.$refs.myEdit.quill
        },
        ...mapState({
            orgs: state => state.Org.org,
            article: state => state.Article.article
        })
    },
    methods: {
        ...mapActions(['remove_article']),
        submitForm(formName) {
            const self = this
            // this.news.imgUrl = this.imageUrl
            console.log('self', self.selects[1])
            self.news.textTypeId = self.selects[1]
            self.news.shield = self.show ? 1 : 0
            self.news.recommend = self.recommend ? 1 : 0
            self.$refs[formName].validate((valid) => {
                if (valid) {
                    let articleEntity = self.news
                    addArticle(articleEntity)
                        .then(res => {
                            console.log(res)
                            if (res.status === 0) {
                                self.$message.success('上传成功')
                            } else {
                                self.$message.error('上传失败')
                            }
                        }, err => { self.$message.error('上传失败') })
                }
            })
        },
        imgHandler(state) {
            console.log('点击图片', state)
            this.addRange = this.$refs.myEdit.quill.getSelection()
            if (state) {
                document.getElementById('imgInput').click()
            }
            this.uploadType = 'image'
            this.uploadData.type = 0
        },
        beforeUpload(file) {
            console.log('file', file)
            return this.upload(file)
        },
        upload(file) {
            this.fullscreenLoading = true
            // this.uploadData.type = 0
            this.uploadData.file = file
        },
        upScuccess(e) {
            let _this = this
            this.fullscreenLoading = false
            let url = e.result
            console.log('url', url)
            if (url != null && url.length > 0) {
                let value = url
                _this.addRange = _this.$refs.myEdit.quill.getSelection()
                console.log('value', value, _this.addRange.index)
                _this.$refs.myEdit.quill.insertEmbed(_this.addRange !== null ?
                    _this.addRange.index : 0, _this.uploadType, value)
            } else {
                _this.$message.error(`${_this.uploadType}插入失败`)
            }
            this.$refs['upload'].clearFiles()
        },
        handleAvatarSuccess(e) {
            console.log('图片上传', e)
            this.fullscreenLoading = false
            this.news.imgUrl = e.result
        },
        before_img(file) {
            console.log(file)
            return this.upload_img(file)
        },
        upload_img(file) {
            this.fullscreenLoading = true
            this.uploadImg.type = 0
            this.uploadImg.file = file
        },
        videoHandler(state) {
            this.addRange = this.$refs.myEdit.quill.getSelection()
            if (state) {
                document.getElementById('imgInput').click()
            }
            this.uploadType = 'video'
            this.uploadData.type = 1
        }

    },
    mounted() {
        this.$refs.myEdit.quill.getModule('toolbar').addHandler('image', this.imgHandler),
            this.$refs.myEdit.quill.getModule('toolbar').addHandler('video', this.videoHandler)
    },
    destroyed() {
        this.remove_article()
    }
}
</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 1%;
  .search {
    width: 30%;
  }
}

.block {
  text-align: center;
  margin-top: 1%;
}

// .ql-video {
//   disabled: none;
// }
</style>